<template>
  <div>
    <div v-for="item in list" :key="item.id"
      class="showimg"
      @touchstart.prevent="touchin(item.id)"
      @touchend.prevent="cleartime(item.id)"
    >
    {{item.id}}
    </div>
     <!-- <div class="message">
      请完善酒店信息
    </div> -->
  </div>
</template>

<script>
export default {
  name: 'Frame',
  data () {
    return {
      list: [{ id: 1 }, { id: 2 }, { id: 3 }]
    }
  },
  methods: {
    touchin (id) {
      console.log(id)
      clearInterval(this.Loop) // 再次清空定时器，防止重复注册定时器
      this.Loop = setTimeout(
        function () {
          alert('是否确认删除')
          console.log(id)
        },
        1000
      )
    },
    cleartime (id) {
      // 这个方法主要是用来将每次手指移出之后将计时器清零
      clearInterval(this.Loop)
    }
  }
}
</script>

<style lang='scss' scoped>
  .showimg{
    width: 40vw;
    height: 30vh;
  }
  .message{
    width: 84vw;
    height: 10.4vw;
    background-color: #000;
    color: white;
    text-align: center;
    line-height: 10.4vw;
    font-size: 4.26vw;
    font-family: SourceHanSansCN-Regular;
    font-weight: 400;
    position: absolute;
    top: 76vw;
    left: 8vw;
  }
</style>
